<template>
    <div class="box">
        <el-dialog title="提示" :visible.sync="isVisible" width="40%">
            <div class="top-template">
                <span style="margin-right: 10px;margin-left: 10px;">流程模板</span>
                <el-select placeholder="请选择" size="mini" v-model="value" style="flex-grow: 1; margin-right: 10px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="bottom-dialog">
                <span class="text-approve">审批流程</span>
                <div class="time-line">
                    <div class="item" v-for="item in 5" :key="item">
                        <div class="icon">
                            <img src="./img/icon.png" alt="">
                        </div>
                        <div class="content">
                            <div class="left">
                                <h1 class="title">项目经理</h1>
                                <div class="tip">单人</div>
                            </div>
                            <div class="right">
                                <div class="aa">111</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isVisible = false">取 消</el-button>
                <el-button type="primary" @click="isVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import visible from '../mixins/edit-dialog'
export default {
    name: "ApproveDialog",
    mixins: [visible],
    props: {
        options: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            titlle: "",

            value: ""
        }
    }
}
</script>

<style lang="scss" scoped>
.box::v-deep {
    .top-template {
        height: 50px;
        width: 100%;
        background-color: #EBF1FA;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bottom-dialog {
        display: flex;
        flex-direction: column;
        margin-top: 20px;

        .text-approve {
            border-left: 3px solid #329EFF;
            padding-left: 10px;
            font-weight: bold;
            font-size: 16px;
            color: rgba(51, 51, 51, 1);
        }

        .time-line {
            margin: 20px;
            .item {
                &:last-child {
                    border: none !important;
                }
                position: relative;
                border-left: 1px solid #6393E8;
                margin-left: 15px;
                .icon {
                    position: absolute;
                    top: 0;
                    left: -10px;
                    width: 20px;
                    height: 20px;
                    // background-color: #999;
                    background-color: #fff;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .content {
                    padding-left: 15px;
                    height: 100px;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-between;
                    align-items: flex-start;

                    .left {
                        .title {
                            padding: 0;
                            margin: 0;
                            font-size: 16px;
                        }

                        .tip {
                            width: 36px;
                            height: 22px;
                            background: #EEF1F5;
                            opacity: 1;
                            font-size: 12px;
                            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                            font-weight: 400;
                            color: #666666;
                            line-height: 18px;
                        }
                    }
                    .right {
                        .aa {
                            background-color: #329EFF;
                            height: 70px;;
                        }
                    }
                }
            }
        }
    }
}
</style>